<template>
  <div class="iframe">
    <div class="i-title">
      <h3>toRaw和markRaw</h3>
    </div>
    <div class="i-tip">对象值：{{ obj.name }}</div>
    <div class="i-tip">对象值：{{ obj.age }}</div>
    <div class="i-tip">单个值：{{ name }}</div>
    <div class="i-tip">单个值：{{ age }}</div>
    <div class="i-tip">
      <el-button @click="updateObj">修改</el-button>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  toRefs,
  toRef,
  toRaw,
  markRaw
} from "vue";

let obj = {
  name: "陶国荣",
  age: 18
};

// obj = markRaw(obj)       // 2.第二步操作
obj = reactive(obj);

// obj = toRaw(obj);      // 1.第一步操作

// 单个响应
const name = toRef(obj, "name");
const age = toRef(obj, "age");

// 多个响应
// const { name, age } = toRefs(obj);
const updateObj = () => {
  obj.name = "tgrong";
  obj.age = 28;
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
